import G6 from '@antv/g6';
import { useEffect } from 'react';

export default () => {
  const data = {
    id: '国重实验室',
    children: [
      {
        id: '电工装备可靠性理论与失效机理',
        children: [
          { id: '综合测试及可靠性增长' },
          { id: '可靠性分析与设计' },
          { id: '运行状态监测与评价' },
        ],
      },
      {
        id: '电工装备电磁综合效应',
        children: [
          { id: '高性能无线电能传输与电磁能量变换' },
          { id: '新型电磁系统设计与性能模拟' },
          { id: '复杂环境电磁兼容与新型材料' },
        ],
      },
      {
        id: '先进电工材料微结构与性能调控',
        children: [
          { id: '功率半导体器件及低维半导体电子器件的设计、制备与表征' },
          { id: '新型电工材料微结构分析与设计' },
          { id: '先进电工材料特性模拟与表征' },
        ],
      },
      {
        id: '电工装备状态感知与智能控制',
        children: [
          { id: '智能传感与量测' },
          { id: '高效驱动与智能控制' },
          { id: '新能源电网与电力电子系统控制' },
        ],
      },
    ],
  };
  useEffect(() => {
    const container = document.getElementById('container');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new G6.TreeGraph({
      container: 'container',
      width,
      height,
      linkCenter: true,
      modes: {
        default: [
          {
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              const data = item.get('model');
              data.collapsed = collapsed;
              return true;
            },
          },
          'drag-canvas',
          'zoom-canvas',
        ],
      },

      defaultNode: {
        size: 30,
      },
      layout: {
        type: 'dendrogram',
        direction: 'LR',
        nodeSep: 80,
        rankSep: 100,
        radial: true,
      },
    });

    graph.node(function (node) {
      return {
        label: node.id,
        labelCfg: {
          style: {
            fontSize: 8,
          },
        },
        // size:10,
      };
    });

    graph.data(data);
    graph.render();
    graph.fitView();

    if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight)
          return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
  }, []);

  return <div id="container"></div>;
};
